<template>
	<view class="flex_box ">
		<u-navbar :border-bottom="false" :title="newsTitle" back-icon-color="#ffffff"
			:background="{background:'#2149c3'}" title-color="#ffffff"></u-navbar>
		<view class="news_detail u-skeleton">
			<view class="u_title u-skeleton-rect">{{siteobj.title}}</view>
			<view class="margin_top u_box">
				<view class="u_time u-skeleton-rect">{{siteobj.publishTime}}</view>
				<view class="u_sc u-skeleton-rect">
					<view class="label" v-if="siteobj.collectFlag == 0" @click="addCollect(siteobj)">+ 收藏</view>
					<view class="ysclabel" v-else @click="deleteCollect(siteobj)">已收藏</view>
				</view>
			</view>
			<view class="u_cont">
				<view v-if="siteobj.content == ''">
					<view class="u_mnrow u-skeleton-rect" v-for="item in mncontent">{{item}}</view>
				</view>
				<view class="u-skeleton-rect" v-else>
					<!-- <view>{{siteobj.content}}</view> -->
					<!-- <rich-text nodes="{{siteobj.content}}"></rich-text> -->
					<view class="u_row">
						<rich-text :nodes="siteobj.content"></rich-text>
					</view>
					<!-- <uni-rate value="">{{}}</uni-rate> -->
				</view>
			</view>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	var _self;
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				userInfoId: '',
				newsTitle: '新闻详情',
				siteobj: {
					title: '君不见，黄河之水天上来，奔流到海不复回。',
					content: '',
					cover: "/profile/upload/2021/11/12/483f1740c33573d02edf9e486294735d.jpeg",
					createBy: null,
					createTime: "2021-11-12 14:17:28",
					publishTime: "2021-11-12 02:11:57",
					remark: null,
					searchValue: null,
					updateBy: null,
					updateTime: null,
					collectFlag: 0
				},
				mncontent: [
					'人生得意须尽欢，莫使金樽空对月',
					'天生我材必有用，千金散尽还复来',
					'人生得意须尽欢，莫使金樽空对月',
					'君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。',
					'人生得意须尽欢，莫使金樽空对月',
					'天生我材必有用，千金散尽还复来',
					'君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。',
					'天生我材必有用，千金散尽还复来',
					'人生得意须尽欢，莫使金樽空对月',
					'人生得意须尽欢，莫使金樽空对月',
					'天生我材必有用，千金散尽还复来',
					'人生得意须尽欢，莫使金樽空对月',
					'君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。',
					'人生得意须尽欢，莫使金樽空对月',
					'天生我材必有用，千金散尽还复来',
					'君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。',
					'天生我材必有用，千金散尽还复来',
				],
				loading: true,
				newsid:0
			};
		},
		onShow() {
			// this.selectdetails();
		},
		onLoad(option) {
			this.selectdetails(option.id);
			this.newsid = option.id
			// $info['content'] = str_replace("<img ", "<img style='max-width:100%;height:auto;'", $info['content']);
		},
		onShareAppMessage(res) {
			return {
				title: this.siteobj.title
			}
		},
		computed: {
			...mapState(['userInfo', 'hasLogin', 'scene', 'openid'])
		},
		methods: {
			selectdetails: function(newslistid) {
				uni.request({
					url: this.serverUrl + 'app/findNews',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: 'POST',
					data: {
						memberId: this.userInfo.id,
						id: newslistid
					},
					success: (r) => {
						console.log(r, 'selectdetails');
						if (r.data.code == 0) {
							this.newsTitle = r.data.data.title
							// this.newsList = r.data.data
							this.loading = false;
							let tempObj = r.data.data;
							if (tempObj.content != null) {
								tempObj.content = tempObj.content.replace(/h2/g, "view").replace(/\\/g, "")
									.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/g, "").replace(/<img/g,
										"<img style=\"width:100%; height: auto;\"").replace(/src=\/"/g,
										"src=\"" + this.serverUrl).replace(/<!--(.*?)-->/g, "");
							}
							tempObj.content = tempObj.content.replace(/<section/g, "<div").replace(
								/<\/section>/g, "</div>");
							tempObj.content = tempObj.content.replace(/<article/g, "<div").replace(
								/<\/article>/g, "</div>");
							this.siteobj = tempObj
						}
					}
				})
			},
			addCollect: function(siteobj) {
				uni.request({
					url: this.serverUrl + 'app/addCollect',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: 'POST',
					data: {
						memberId: this.userInfo.id,
						newsId: siteobj.id,
						title: siteobj.title
					},
					success: (r) => {
						console.log(r, 'addCollect');
						if (r.data.code == 0) {
							this.$refs.uToast.show({
								title: '收藏成功！',
								type: 'success',
							})
							this.siteobj.collectFlag = 1;
							console.log(this.siteobj, 'this.siteobj')
						}
					}
				})
			},
			deleteCollect: function(siteobj) {
				uni.request({
					url: this.serverUrl + 'app/deleteCollect',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: 'POST',
					data: {
						memberId: this.userInfo.id,
						newsId: siteobj.id
					},
					success: (r) => {
						console.log(r, 'deleteCollect');
						if (r.data.code == 1) {
							this.$refs.uToast.show({
								title: '取消收藏！',
								type: 'success',
							})
							this.siteobj.collectFlag = 0;
						}
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flex_box {
		padding: 30rpx 60rpx;

		.u_title {
			font-size: 40rpx;
			color: #333333;
		}

		.u_box {
			display: flex;
			justify-content: space-between;
			color: #999999;

			.u_time {
				font-size: 28rpx;
			}

			.u_sc {
				font-size: 28rpx;

				.label {
					display: inline-block;
					background-color: #2149c3;
					font-size: 20rpx;
					padding: 4rpx 10rpx;
					color: #FFFFFF;
					border-radius: 6rpx;
					vertical-align: middle;
				}

				.ysclabel {
					display: inline-block;
					background-color: #FDE6D2;
					font-size: 20rpx;
					padding: 4rpx 10rpx;
					color: #333333;
					border-radius: 6rpx;
					vertical-align: middle;
				}
			}
		}

		.u_cont {
			padding-top: 20rpx;
			color: #666666;
			font-size: 30rpx;

			.u_mnrow {
				margin-bottom: 20rpx;
			}

			.u_row {
				image {
					max-width: 100%;
				}

				img {
					max-width: 100%;
				}
			}
		}

		.margin_top {
			margin-top: 20rpx;
		}
	}
</style>
